<template>
  <div class="common-layout__first">
    <el-container>
      <el-header>
        <el-container>
          <el-aside width="450px">
            <el-carousel height="380px">
              <el-carousel-item
                v-for="video in rankVideoHeader"
                :key="video.id"
                @click="router.toVideo(video.id)"
              >
                <div class="video-carousel">
                  <div
                    class="cover"
                    :style="{
                      'background-image':
                        'url(&#34;' +
                        commonApi.getCover(video.coverPath) +
                        '&#34;)',
                    }"
                  ></div>
                  <div class="footer">
                    <h3>
                      {{ video.title }}
                    </h3>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-aside>
          <el-main>
            <div class="card-box">
              <div v-for="videoInfo in recommendHeader">
                <video-card1 :videoInfo="videoInfo"></video-card1>
              </div>
            </div>
          </el-main>
        </el-container>
        <div class="refresh link" @click="getRecommendVideo(6, true)">
          <el-icon>
            <RefreshLeft />
          </el-icon>
          <div>换一换</div>
        </div>
      </el-header>
      <el-footer style="height: auto; margin-top: 20px">
        <RecommendVideos></RecommendVideos>
      </el-footer>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { RefreshLeft } from "@element-plus/icons-vue";
import VideoCard1 from "@/components/VideoCard1.vue";
import commonApi from "@/api/common";
import RecommendVideos from "@/components/RecommendVideos.vue";
import videoApi from "@/api/video";
import router from "@/router/router";
import { Video } from "@/types/video";

const recommendHeader = ref<Video[]>([]);
const busyLoadVideo = ref<boolean>(false); // 同步加载recommendBody
const rankVideoHeader = ref<Video[]>([]);
const recommendBody = ref<Video[]>([]);

const getRecommendVideo = (count: number, isHeader: boolean) => {
  busyLoadVideo.value = true;
  videoApi.getRecommendVideo({ count: count }).then((res) => {
    busyLoadVideo.value = false;
    if (res.data.code === 0) {
      if (isHeader) {
        recommendHeader.value = res.data.data;
      } else {
        recommendBody.value = res.data.data;
      }
    }
  });
};

const getRankHeader = () => {
  videoApi.getRank("daily", null, 6).then((res) => {
    if (res.data.code === 0) {
      rankVideoHeader.value = res.data.data;
    }
  });
};

onMounted(() => {
  // 获取推荐视频
  getRecommendVideo(6, true);
  // 获取热榜视频, 放在轮播图上
  getRankHeader();
});
</script>

<style lang="scss" scoped>
.common-layout__first {
  /*header*/
  .el-header,
  .el-header .el-main {
    --el-header-height: remove;
    --el-main-padding: remove;
    position: relative;
    display: block;
  }

  .el-carousel {
    position: relative;
    width: 450px;
    border-radius: 15px;
    overflow: hidden;

    .video-carousel {
      & > .cover {
        height: 325px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
      }

      & > .footer {
        position: absolute;
        width: 100%;
        bottom: 0;
        height: 100px;
        background: linear-gradient(
          rgb(0, 0, 0, 0),
          rgb(0, 0, 0),
          rgb(0, 0, 0),
          rgb(0, 0, 0)
        );

        h3 {
          color: #ffffff;
          opacity: 0.75;
          text-align: left;
          position: relative;
          top: 40px;
          left: 15px;
        }
      }
    }
  }

  /*header - main*/
  .el-header {
    .el-main .card-box {
      height: 380px;
      display: grid;
      grid-template-columns: repeat(3, 33.3%);
      grid-template-rows: repeat(2, 50%);
      padding: 10px;
      overflow: hidden;
      margin-left: 20px;

      & > div {
        margin-bottom: 10px;
      }
    }

    .refresh {
      position: absolute;
      top: 0;
      right: 0px;
      background: #fafafa;
      border-radius: 10px;
      width: 30px;
      height: 80px;
      border: 1px solid #d2d2d2;
      box-shadow: 0 0 3px 3px #e8e8e8;

      & > div {
        margin: 0 auto;
        writing-mode: vertical-rl;
        text-orientation: upright;
      }
    }
  }
}
</style>

<style lang="scss">
/* 调整轮播图切换按钮的位置 */
.common-layout__first {
  .el-carousel__container {
    button {
      position: absolute;
      bottom: -10px;
      top: auto;
      background-color: rgba(250, 250, 250, 0.2);

      &:hover {
        background-color: rgba(250, 250, 250, 0.5);
      }
    }
    button.el-carousel__arrow--left {
      left: auto;
      right: 80px;
    }
  }

  .el-carousel .el-carousel__indicators--horizontal {
    left: 20px;
    transform: none;
  }
}
</style>
